<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bubble Chat</title>
		<!-- 各種ライブラリ -->
		<script src="http://www.google.com/jsapi"></script>
		<script>google.load('jquery', '1')</script>
		<script src="/js/json.js"></script>
		<script src="/js/jquery-ui-1.8.9.custom.min.js"></script>
		<script src="/js/jquery.lightbox_me.js"></script>
		<script src="/socket.io/socket.io.js"></script>
		<!-- 自作ライブラリ -->
		<script src="/js/script.js"></script>
		<!-- スタイルシート -->
		<link rel="stylesheet" type="text/css" href="/css/styles.css">
	</head>
	<body>
		<!-- メイン画面 -->
		<div id="view_layer">
			<div id="canvas_layer"></div>
		</div>

		<!-- スクロールレイヤー -->
		<div id="scroll_layer" style="display: none;">
		</div>
		<div id="cursor_position"></div>
				
		<!-- タイトル -->
		<div id="subject">
			<h1></h1>
			<div id="topic_desc"></div>
		</div>
		
		<!-- 履歴ウィンドウ -->
		<div id="chat_window">
			<h3>Comment</h3> 
			<div id="chat"></div>
		</div>
		
		<!-- 入力ウィンドウ -->
		<div id="input_form">
			<input type="text" autocomplete="off" id="text" />
			<div id="send_msg"><span>送信</span></div>
		</div>

		<!-- トピック関連フォーム -->
		<div id="topic_form">
			<input type="hidden" id="topic_id" value="<%= topic_id %>" />
		</div>
		
		<!-- 初回起動時の名称設定ウィンドウ -->
		<div id="register_name_layer">
			<h3>ニックネームを入力してください。</h3>
			<div id="register_name_form">
				<input type="text" id="register_name_text" class="textbox"/>
				<div class="name_actions">
					<a class="close button" id="register_name_ok">OK</a>
				</div>
			</div>
		</div>
		
		<!-- 名称変更ウィンドウ -->
		<div id="rename_layer">
			<h3>ニックネームを入力してください。</h3>
			<div id="rename_name_form">
				<input type="text" id="rename_name_text" class="textbox"/>
				<div class="name_actions">
					<a class="close button" id="rename_name_ok">OK</a>
				</div>
			</div>
		</div>
		
		<!-- トピックの新規作成ウィンドウ -->
		<div id="new_topic_layer">
			<h3>新しいトピックを作成します。</h3>
			<span>必要事項を入力してください。</span>
			<div id="new_topic_form">
				<strong>タイトル:</strong>
				<input type="text" id="new_topic_title" class="textbox"/>
				<strong>概要:</strong>
				<textarea id="new_topic_desc" class="textbox" style="height:50px;"></textarea>
				<div id="topic_actions">
					<a class="button" id="new_topic_ok">OK</a>
					<a class="close button" id="cancel">Cancel</a>
				</div>
			</div>
		</div>
		
		<!-- トピックの読み込みウィンドウ -->
		<div id="load_topic_layer">
			<h3>既存のトピックに参加します。</h3>
			<span id="topic_message">参加したいトピックを選んでください。</span>
			<div id="load_topic_form">
				<strong>タイトル:</strong>
				<div id="load_topic_title"></div>
				<div id="topic_actions">
					<a class="close button" id="cancel">Cancel</a>
				</div>
			</div>
		</div>

		<!-- お知らせ -->
		<!-- <div id="notice"></div> -->
		
		<!-- ヘルプウィンドウ -->
		<div id="help_layer">
			<h3>このアプリケーションの操作方法です。</h3>
			<div id="help_form">
				<div id="help_title">
					<h4>何をするアプリケーションなの？</h4>
					<p>基本はチャットアプリケーションです。</p>
					<p>トピックごとにチャットをします。入力したメッセージはカラフルな円として画面に表示されます。</p>
					<h4>どんなことができるの？</h4>
					<p>メッセージを送る、他人のメッセージに自分のメッセージを関連付けるのが主な機能です。</p>
					<p>関連付けられたメッセージはサイズが少しずつ大きくなります。</p>
					<p>画像を画面内にドラッグすることで、画像も貼り付けられます。</p>
					<h4>メッセージを入力するには？</h4>
					<p>画面下部のテキストボックスにメッセージを入力し、送信ボタンを押してください。</p>
					<h4>他人のメッセージに関連付けるには？</h4>
					<p>メッセージを入力する前なら、関連付けたいメッセージをクリックしてからメッセージを入力してください。</p>
					<p>既存のメッセージの場合は、関連付けたいメッセージにメッセージをドラッグしてください。</p>
					<h4>画像を入力するには？</h4>
					<p>画像を画面内にドラッグしてください（あまり大きなデータには対応していません）。</p>
					<h4>画面をスクロールするには？</h4>
					<p>[Ctrl]キーを押下しながらドラッグすることで画面をスクロールできます。</p>
				</div>
				<div id="topic_actions">
					<a class="close button" id="cancel">Close</a>
				</div>
			</div>
		</div>
		
		<!-- メニュー群 -->
		<div id="menu_container">
			<div id='menu'>
				<img class="menu_item" id="menu_newtopic" src="image/menu_newtopic.png" title="新しいトピックを作る" alt="" />
				<img class="menu_item" id="menu_loadtopic" src="image/menu_join.png" title="トピックに参加する" alt="" />
				<img class="menu_item" id="menu_history" src='image/menu_history.png' title='履歴表示' alt='' />
				<img class="menu_item" id="menu_rename" src="image/menu_personal.png" title="名前を変更する" alt="" />
				<!-- <img class="menu_item" id="menu_setting" src='image/menu_setting.png' title='テスト用汎用ボタン' alt='' /> -->
				<img class="menu_item" id="menu_help" src='image/menu_help.png' title='このツールについて' alt='' />
			</div>
		</div>
	</body>
</html>
